<script>
export default {
  name: "animationPage",
  data(){
    return{
      flag:true
    }
  },
  methods:{
    play(){
      this.flag = !this.flag
    }
  }
}
</script>

<template>
<!--  先下载，再引入main.js-->

<div>
  <button @click="play">change</button>
<!--  设置动画的盒子要用transition包裹-->
  <transition>
    <div class="box" v-if="flag"></div>
  </transition>
<!--  当有两个盒子需要动画设置时，可以设置transition的name属性-->
  <transition name="box">
    <div class="box1" v-if="flag"></div>
  </transition>
</div>
</template>

<style scoped lang="less">
.box{
  width: 200px;
  height: 200px;
  background-color: pink;
}
.box1{
  width: 200px;
  height: 200px;
  background-color: pink;
}
//进入
.v-enter{
  transform: translateX(500px);
}
.box-enter{
  transform: translateX(500px);
}
//进入过程
.v-enter-to{
  transform:translateX(0px)
}
.box-enter-to{
  transform:translateX(0px)
}
//进入时间
.v-enter-active{
  transition:all 3s;
}
.box-enter-active{
  transition:all 3s;
}
//移出
.v-leave{
  transform: translateX(0px);
}
//移出过程
.v-leave-to{
  transform: translateX(500px);
}
//移出时间
.v-leave-active{
  transition: all 3s;
}
</style>